<template>
	<view class="view-contain">
		<public-module leftIcon="arrow-left" title="资料一表通算" />
		
		<!-- 表格区域 -->
		<view class="table-section">
			<!-- 题目表格 -->
			<view class="question-table-container">
				<view class="table-title">
				<template v-if="!showAnswers">
					<span class="status-item">用时：{{ formattedTime }}</span>
					<span class="status-divider">|</span>
					<span class="status-item">已完成：{{ completedCount }}/{{ totalQuestions }}</span>
					<span class="status-divider">|</span>
					<span class="status-item notepad-icon" @click="toggleNotepad">📝 草稿</span>
				</template>
				<template v-else>
					<span class="status-item">用时：{{ formattedTime }}</span>
					<span class="status-divider">|</span>
					<span class="status-item" :class="{'all-correct': correctCount === totalQuestions}">
						做对：{{ correctCount }}/{{ totalQuestions }}
						{{ correctCount === totalQuestions ? '🎉 全对！' : '' }}
					</span>
					<span class="status-divider">|</span>
					<span class="status-item">得分：{{ totalScore }}分</span>
					<span class="status-divider">|</span>
					<span class="status-item" :class="{'best-record': isBestRecord}">
						{{ isBestRecord ? '🏆 新纪录！' : '' }}
					</span>
					<span class="status-divider">|</span>
					<span class="status-item notepad-icon" @click="toggleNotepad">📝 草稿</span>
				</template>
			</view>
				<view class="data-table">
					<view class="table-row header-row">
						<view class="table-cell period-a">现期A</view>
						<view class="table-cell current-value">{{ currentData.periodA }}</view>
						<view class="table-cell period-b">现期B</view>
						<view class="table-cell current-value">{{ currentData.periodB }}</view>
					</view>
					
					<view class="table-row">
						<view class="table-cell period-a">增长率R1</view>
						<view class="table-cell growth-value">{{ currentData.growthR1 }}%</view>
						<view class="table-cell period-b">增长率R2</view>
						<view class="table-cell growth-value">{{ currentData.growthR2 }}%</view>
					</view>
					
					<!-- 增长量△1和△2行 -->
						<view class="table-row">
							<view class="table-cell base-period" @click="showFormula('growthAmountR1')">增长量△1</view>
					<view class="table-cell input-container centered">
						<view v-if="!showAnswers" class="input-wrapper">
							<view 
								class="table-input borderless"
								@click="!completedFields.growthAmountR1 && showKeyboard('growthAmountR1')"
								:class="{ 'placeholder': !inputData.growthAmountR1, 'completed': completedFields.growthAmountR1 }"
							>
								{{ inputData.growthAmountR1 || '请填写' }}
							</view>
								</view>
								<view v-else class="answer-display">
									<view class="user-answer" :class="{ 'correct': isAnswerCorrect('growthAmountR1'), 'incorrect': !isAnswerCorrect('growthAmountR1') && inputData.growthAmountR1 }">
										<span class="label">你的:</span>
										<span class="value">{{ inputData.growthAmountR1 || '未作答' }}</span>
										<text v-if="isAnswerCorrect('growthAmountR1')" class="check-icon">✓</text>
										<text v-else-if="!isAnswerCorrect('growthAmountR1') && inputData.growthAmountR1" class="error-icon">✗</text>
									</view>
									<view class="correct-answer">
										<span class="label">正确:</span>
										<span class="value correct">{{ getAnswerRange('growthAmountR1').formatted }}</span>
									</view>
									<view class="time-answer">
										<span class="label">用时:</span>
										<span class="value time">{{ answerTimes.growthAmountR1 || '0.0' }}秒</span>
									</view>
								</view>
							</view>
							<view class="table-cell base-period" @click="showFormula('growthAmountR2')">增长量△2</view>
					<view class="table-cell input-container centered">
						<view v-if="!showAnswers" class="input-wrapper">
							<view 
								class="table-input borderless"
								@click="!completedFields.growthAmountR2 && showKeyboard('growthAmountR2')"
								:class="{ 'placeholder': !inputData.growthAmountR2, 'completed': completedFields.growthAmountR2 }"
							>
								{{ inputData.growthAmountR2 || '请填写' }}
							</view>
								</view>
								<view v-else class="answer-display">
									<view class="user-answer" :class="{ 'correct': isAnswerCorrect('growthAmountR2'), 'incorrect': !isAnswerCorrect('growthAmountR2') && inputData.growthAmountR2 }">
										<span class="label">你的:</span>
										<span class="value">{{ inputData.growthAmountR2 || '未作答' }}</span>
										<text v-if="isAnswerCorrect('growthAmountR2')" class="check-icon">✓</text>
										<text v-else-if="!isAnswerCorrect('growthAmountR2') && inputData.growthAmountR2" class="error-icon">✗</text>
									</view>
									<view class="correct-answer">
										<span class="label">正确:</span>
										<span class="value correct">{{ getAnswerRange('growthAmountR2').formatted }}</span>
									</view>
									<view class="time-answer">
										<span class="label">用时:</span>
										<span class="value time">{{ answerTimes.growthAmountR2 || '0.0' }}秒</span>
									</view>
								</view>
							</view>
						</view>
					
					<view class="table-row">
						<view class="table-cell base-period" @click="showFormula('basePeriodA')">基期A'</view>
				<view class="table-cell input-container centered">
					<view v-if="!showAnswers" class="input-wrapper">
						<!-- 修改为div元素而非input，避免触发系统键盘 -->
						<view 
							class="table-input borderless"
							@click="!completedFields.basePeriodA && showKeyboard('basePeriodA')"
							:class="{ 'placeholder': !inputData.basePeriodA, 'completed': completedFields.basePeriodA }"
						>
							{{ inputData.basePeriodA || '请填写' }}
						</view>
							</view>
							<view v-else class="answer-display">
								<view class="user-answer" :class="{ 'correct': isAnswerCorrect('basePeriodA'), 'incorrect': !isAnswerCorrect('basePeriodA') && inputData.basePeriodA }">
									<span class="label">你的:</span>
									<span class="value">{{ inputData.basePeriodA || '未作答' }}</span>
									<text v-if="isAnswerCorrect('basePeriodA')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('basePeriodA') && inputData.basePeriodA" class="error-icon">✗</text>
								</view>
								<view class="correct-answer">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('basePeriodA').formatted }}</span>
								</view>
								<view class="time-answer">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.basePeriodA || '0.0' }}秒</span>
								</view>
							</view>
						</view>
						<view class="table-cell base-period" @click="showFormula('basePeriodB')">基期B'</view>
				<view class="table-cell input-container centered">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.basePeriodB && showKeyboard('basePeriodB')"
							:class="{ 'placeholder': !inputData.basePeriodB, 'completed': completedFields.basePeriodB }"
						>
							{{ inputData.basePeriodB || '请填写' }}
						</view>
							</view>
							<view v-else class="answer-display">
								<view class="user-answer" :class="{ 'correct': isAnswerCorrect('basePeriodB'), 'incorrect': !isAnswerCorrect('basePeriodB') && inputData.basePeriodB }">
									<span class="label">你的:</span>
									<span class="value">{{ inputData.basePeriodB || '未作答' }}</span>
									<text v-if="isAnswerCorrect('basePeriodB')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('basePeriodB') && inputData.basePeriodB" class="error-icon">✗</text>
								</view>
								<view class="correct-answer">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('basePeriodB').formatted }}</span>
								</view>
								<view class="time-answer">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.basePeriodB || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					
					<!-- 现期比重P行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('currentWeight')">
						<view class="table-cell weight-row" @click="showFormula('currentWeight')">现期比重P</view>
				<view class="table-cell input-container full-width">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.currentWeight && showKeyboard('currentWeight')"
							:class="{ 'placeholder': !inputData.currentWeight, 'completed': completedFields.currentWeight }"
						>
							{{ inputData.currentWeight || '请填写' }}
						</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('currentWeight'), 'incorrect': !isAnswerCorrect('currentWeight') && inputData.currentWeight }">{{ inputData.currentWeight || '未作答' }}{{ inputData.currentWeight ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('currentWeight')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('currentWeight') && inputData.currentWeight" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('currentWeight').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.currentWeight || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 其他行的修改类似，都将input替换为view -->
					<!-- 两期比重巖d行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('weightDifference')">
						<view class="table-cell difference-row" @click="showFormula('weightDifference')">
				<view>两期</view>
				<view>比重差</view>
				</view>
				<view class="table-cell input-container full-width">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.weightDifference && showKeyboard('weightDifference')"
							:class="{ 'placeholder': !inputData.weightDifference, 'completed': completedFields.weightDifference }"
						>
							{{ inputData.weightDifference || '请填写' }}
						</view>
								<span class="unit">个百分点</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('weightDifference'), 'incorrect': !isAnswerCorrect('weightDifference') && inputData.weightDifference }">{{ inputData.weightDifference || '未作答' }}{{ inputData.weightDifference ? '个百分点' : '' }}</span>
									<text v-if="isAnswerCorrect('weightDifference')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('weightDifference') && inputData.weightDifference" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('weightDifference').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.weightDifference || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 增长贡献率Ra行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('growthContributionRate')">
						<view class="table-cell growth-rate" @click="showFormula('growthContributionRate')">
							<view>增长</view>
							<view>贡献率Ra</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.growthContributionRate && showKeyboard('growthContributionRate')"
									:class="{ 'placeholder': !inputData.growthContributionRate, 'completed': completedFields.growthContributionRate }"
								>
									{{ inputData.growthContributionRate || '请填写' }}
								</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('growthContributionRate'), 'incorrect': !isAnswerCorrect('growthContributionRate') && inputData.growthContributionRate }">{{ inputData.growthContributionRate || '未作答' }}{{ inputData.growthContributionRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('growthContributionRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('growthContributionRate') && inputData.growthContributionRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('growthContributionRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.growthContributionRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 间隔增长率r行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('yearlyGrowthRate')">
						<view class="table-cell yearly-growth" @click="showFormula('yearlyGrowthRate')">间隔增长率</view>
				<view class="table-cell input-container full-width">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.yearlyGrowthRate && showKeyboard('yearlyGrowthRate')"
							:class="{ 'placeholder': !inputData.yearlyGrowthRate, 'completed': completedFields.yearlyGrowthRate }"
						>
							{{ inputData.yearlyGrowthRate || '请填写' }}
						</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('yearlyGrowthRate'), 'incorrect': !isAnswerCorrect('yearlyGrowthRate') && inputData.yearlyGrowthRate }">{{ inputData.yearlyGrowthRate || '未作答' }}{{ inputData.yearlyGrowthRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('yearlyGrowthRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('yearlyGrowthRate') && inputData.yearlyGrowthRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('yearlyGrowthRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.yearlyGrowthRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- AB和增长率r3行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('abSumGrowthRate')">
						<view class="table-cell ab-growth" @click="showFormula('abSumGrowthRate')">
					<view>AB和</view>
					<view>增长率</view>
				</view>
				<view class="table-cell input-container full-width">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.abSumGrowthRate && showKeyboard('abSumGrowthRate')"
							:class="{ 'placeholder': !inputData.abSumGrowthRate, 'completed': completedFields.abSumGrowthRate }"
						>
							{{ inputData.abSumGrowthRate || '请填写' }}
						</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('abSumGrowthRate'), 'incorrect': !isAnswerCorrect('abSumGrowthRate') && inputData.abSumGrowthRate }">{{ inputData.abSumGrowthRate || '未作答' }}{{ inputData.abSumGrowthRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('abSumGrowthRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('abSumGrowthRate') && inputData.abSumGrowthRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('abSumGrowthRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.abSumGrowthRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
						
					<!-- 平均数增长率行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('avgGrowthRate')">
						<view class="table-cell ab-growth" @click="showFormula('avgGrowthRate')">
					<view>平均数</view>
					<view>增长率</view>
				</view>
				<view class="table-cell input-container full-width">
					<view v-if="!showAnswers" class="input-wrapper">
						<view 
							class="table-input borderless"
							@click="!completedFields.avgGrowthRate && showKeyboard('avgGrowthRate')"
							:class="{ 'placeholder': !inputData.avgGrowthRate, 'completed': completedFields.avgGrowthRate }"
						>
							{{ inputData.avgGrowthRate || '请填写' }}
						</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('avgGrowthRate'), 'incorrect': !isAnswerCorrect('avgGrowthRate') && inputData.avgGrowthRate }">{{ inputData.avgGrowthRate || '未作答' }}{{ inputData.avgGrowthRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('avgGrowthRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('avgGrowthRate') && inputData.avgGrowthRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('avgGrowthRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.avgGrowthRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 新增计算项 -->
					<!-- 基期比重P'行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('basePeriodWeight')">
						<view class="table-cell ab-growth" @click="showFormula('basePeriodWeight')">
							<view>基期比重</view>
							<view>P'</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.basePeriodWeight && showKeyboard('basePeriodWeight')"
									:class="{ 'placeholder': !inputData.basePeriodWeight, 'completed': completedFields.basePeriodWeight }"
								>
									{{ inputData.basePeriodWeight || '请填写' }}
								</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('basePeriodWeight'), 'incorrect': !isAnswerCorrect('basePeriodWeight') && inputData.basePeriodWeight }">{{ inputData.basePeriodWeight || '未作答' }}{{ inputData.basePeriodWeight ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('basePeriodWeight')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('basePeriodWeight') && inputData.basePeriodWeight" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('basePeriodWeight').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.basePeriodWeight || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					

					<!-- 拉动增长率行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('pullGrowthRate')">
						<view class="table-cell ab-growth" @click="showFormula('pullGrowthRate')">
							<view>拉动</view>
							<view>增长率</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.pullGrowthRate && showKeyboard('pullGrowthRate')"
									:class="{ 'placeholder': !inputData.pullGrowthRate, 'completed': completedFields.pullGrowthRate }"
								>
									{{ inputData.pullGrowthRate || '请填写' }}
								</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('pullGrowthRate'), 'incorrect': !isAnswerCorrect('pullGrowthRate') && inputData.pullGrowthRate }">{{ inputData.pullGrowthRate || '未作答' }}{{ inputData.pullGrowthRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('pullGrowthRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('pullGrowthRate') && inputData.pullGrowthRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('pullGrowthRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.pullGrowthRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 基期和行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('basePeriodSum')">
						<view class="table-cell ab-growth" @click="showFormula('basePeriodSum')">
							<view>基期和</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.basePeriodSum && showKeyboard('basePeriodSum')"
									:class="{ 'placeholder': !inputData.basePeriodSum, 'completed': completedFields.basePeriodSum }"
								>
									{{ inputData.basePeriodSum || '请填写' }}
								</view>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('basePeriodSum'), 'incorrect': !isAnswerCorrect('basePeriodSum') && inputData.basePeriodSum }">{{ inputData.basePeriodSum || '未作答' }}</span>
									<text v-if="isAnswerCorrect('basePeriodSum')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('basePeriodSum') && inputData.basePeriodSum" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('basePeriodSum').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.basePeriodSum || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 基期差行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('basePeriodDiff')">
						<view class="table-cell ab-growth" @click="showFormula('basePeriodDiff')">
							<view>基期差</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.basePeriodDiff && showKeyboard('basePeriodDiff')"
									:class="{ 'placeholder': !inputData.basePeriodDiff, 'completed': completedFields.basePeriodDiff }"
								>
									{{ inputData.basePeriodDiff || '请填写' }}
								</view>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('basePeriodDiff'), 'incorrect': !isAnswerCorrect('basePeriodDiff') && inputData.basePeriodDiff }">{{ inputData.basePeriodDiff || '未作答' }}</span>
									<text v-if="isAnswerCorrect('basePeriodDiff')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('basePeriodDiff') && inputData.basePeriodDiff" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('basePeriodDiff').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.basePeriodDiff || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>
					
					<!-- AB差增长率行 -->
					<view class="table-row" v-if="isFieldInCurrentTraining('abDiffGrowthRate')">
						<view class="table-cell ab-growth" @click="showFormula('abDiffGrowthRate')">
							<view>AB差</view>
							<view>增长率</view>
						</view>
						<view class="table-cell input-container full-width">
							<view v-if="!showAnswers" class="input-wrapper">
								<view 
									class="table-input borderless"
									@click="!completedFields.abDiffGrowthRate && showKeyboard('abDiffGrowthRate')"
									:class="{ 'placeholder': !inputData.abDiffGrowthRate, 'completed': completedFields.abDiffGrowthRate }"
								>
									{{ inputData.abDiffGrowthRate || '请填写' }}
								</view>
								<span class="unit">%</span>
							</view>
							<view v-else class="answer-display-row">
								<view class="answer-item">
									<span class="label">你的:</span>
									<span class="value" :class="{ 'correct': isAnswerCorrect('abDiffGrowthRate'), 'incorrect': !isAnswerCorrect('abDiffGrowthRate') && inputData.abDiffGrowthRate }">{{ inputData.abDiffGrowthRate || '未作答' }}{{ inputData.abDiffGrowthRate ? '%' : '' }}</span>
									<text v-if="isAnswerCorrect('abDiffGrowthRate')" class="check-icon">✓</text>
									<text v-else-if="!isAnswerCorrect('abDiffGrowthRate') && inputData.abDiffGrowthRate" class="error-icon">✗</text>
								</view>
								<view class="answer-item">
									<span class="label">正确:</span>
									<span class="value correct">{{ getAnswerRange('abDiffGrowthRate').formatted }}</span>
								</view>
								<view class="answer-item">
									<span class="label">用时:</span>
									<span class="value time">{{ answerTimes.abDiffGrowthRate || '0.0' }}秒</span>
								</view>
							</view>
						</view>
					</view>

				</view>
				
				<view class="action-buttons">
					<u-button 
						type="primary" 
						@click="refreshData"
						class="btn-refresh"
						plain
						icon="reload"
					>
						刷新数据
					</u-button>
					<u-button 
						type="success" 
						@click="submitAnswers"
						class="btn-submit"
						icon="checkmark"
						:disabled="isSubmitted"
					>
						{{ isSubmitted ? '已提交' : '提交答案' }}
					</u-button>
				</view>
			</view>
		</view>
		
		<!-- 公式显示弹窗 -->
		<view v-if="showFormulaModal" class="formula-modal" @click="hideFormula">
			<view class="formula-content" @click.stop>
				<view class="formula-title">计算公式</view>
				<view class="formula-text">{{ currentFormula }}</view>
			</view>
		</view>
		
		<!-- 数字键盘 -->
		<view v-if="showKeyboardModal" class="keyboard-modal" @click="hideKeyboard">
			<view class="keyboard-content" @click.stop>
				<view class="keyboard-header">
					<view class="input-display">{{ currentInputValue }}</view>
				</view>
				<view class="keyboard-grid">
					<view class="keyboard-row">
						<view class="key-button number" @click="inputNumber('7')">7</view>
						<view class="key-button number" @click="inputNumber('8')">8</view>
						<view class="key-button number" @click="inputNumber('9')">9</view>
						<view class="key-button action" @click="deleteNumber">退格</view>
					</view>
					<view class="keyboard-row">
						<view class="key-button number" @click="inputNumber('4')">4</view>
						<view class="key-button number" @click="inputNumber('5')">5</view>
						<view class="key-button number" @click="inputNumber('6')">6</view>
						<view class="key-button action" @click="clearInput">清空</view>
					</view>
					<view class="keyboard-row">
						<view class="key-button number" @click="inputNumber('1')">1</view>
						<view class="key-button number" @click="inputNumber('2')">2</view>
						<view class="key-button number" @click="inputNumber('3')">3</view>
						<view class="key-button action" @click="toggleSign">±</view>
					</view>
					<view class="keyboard-row">
						<view class="key-button number" @click="inputNumber('0')">0</view>
						<view class="key-button number" @click="inputNumber('.')">.</view>
						<view class="key-button confirm" @click="confirmInput">确定</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 草稿纸 -->
		<view v-if="showNotepad" class="notepad-modal" @click="hideNotepad">
			<view class="notepad-content" @click.stop>
				<!-- 绘制区域 - 使用Canvas 2D接口（支持同层渲染，性能更佳） -->
					<view class="canvas-container">
						<canvas
							type="2d"
							id="notepad-canvas"
							class="notepad-canvas"
							@touchstart="startDrawing"
							@touchmove="draw"
							@touchend="stopDrawing"
							@touchcancel="stopDrawing"
							style="touch-action: none;"
							disable-scroll="true"
						></canvas>
						<!-- 橡皮擦范围指示器 -->
						<view 
							v-if="isEraserMode && showEraserIndicator"
							class="eraser-indicator"
							:style="{
								left: eraserX - eraserRadius + 'px',
								top: eraserY - eraserRadius + 'px',
								width: eraserRadius * 2 + 'px',
								height: eraserRadius * 2 + 'px',
								borderColor: notepadColor
							}"
						></view>
					</view>
				
				<!-- 控制区域 -->
				<view class="notepad-controls">
					<!-- 颜色选择和操作按钮 -->
					<view class="control-row">
						<!-- 颜色选择 -->
						<view class="color-picker">
							<view class="color-options">
								<view
									v-for="color in notepadColors"
									:key="color"
									class="color-option"
									:class="{ 'active': notepadColor === color }"
									:style="{ backgroundColor: color }"
									@click="changeColor(color)"
								></view>
							</view>
						</view>
						
						<!-- 操作按钮 -->
						<view class="notepad-buttons">
							<view 
								class="notepad-icon-button"
								:class="{ 'active': !isEraserMode }"
								@click="exitEraserMode"
							>
								<text class="icon">✏️</text>
							</view>
							<view 
								class="notepad-icon-button"
								:class="{ 'disabled': currentStep <= -1 }"
								@click="!!(currentStep > -1) && undo()"
							>
								<text class="icon">↩️</text>
							</view>
							<view 
								class="notepad-icon-button"
								:class="{ 'active': isEraserMode }"
								@click="toggleEraserMode"
							>
								<text class="icon">🧽</text>
							</view>
							<view 
								class="notepad-icon-button clear-button"
								@click="clearNotepad"
							>
								<text class="icon">🧹</text>
							</view>
							<view 
								class="notepad-icon-button close-button"
								@click="hideNotepad"
							>
								<text class="icon">×</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { estimateRecordAdd } from "@/config/api.js";
	
	export default {
		data() {
			return {
				// 当前数据（由系统随机生成）
				currentData: {
					periodA: '',     // 现期A值
					periodB: '',     // 现期B值
					growthR1: '',    // 增长率r1
					growthR2: ''     // 增长率r2
				},
				
				// 用户输入数据
				inputData: {
					basePeriodA: '',
					basePeriodB: '',
					growthAmountR1: '',
					growthAmountR2: '',
					currentWeight: '',
					weightDifference: '',
					growthContributionRate: '',
					yearlyGrowthRate: '',
					abSumGrowthRate: '',
					avgGrowthRate: '',
					// 新增的5个计算项（移除平均数的增长量）
					basePeriodWeight: '',     // 基期比重P'
					pullGrowthRate: '',       // 拉动增长率
					basePeriodSum: '',        // 基期和
					basePeriodDiff: '',       // 基期差
					abDiffGrowthRate: ''      // AB差的增长率
				},
				
				// 计时相关
				startTime: 0,              // 开始时间戳
				timer: null,               // 计时器
				timeUsed: 0,               // 用时（秒）
				formattedTime: '00:00',    // 格式化后的时间显示
				
				// 答题统计
				completedCount: 0,         // 已完成填空数
				correctCount: 0,           // 正确题目数
				totalQuestions: 10,        // 总题目数（前4个固定 + 后11个中随机选择6个）
				isBestRecord: false,       // 是否为最好成绩
				totalScore: 0,             // 总得分
				
				// 训练模式相关
				currentTrainingFields: [], // 当前训练的字段列表
				allTrainingFields: [       // 所有可训练的字段
					'basePeriodA', 'basePeriodB', 'growthAmountR1', 'growthAmountR2', // 前4个固定字段
					'currentWeight', 'weightDifference', 'growthContributionRate', 'yearlyGrowthRate', 'abSumGrowthRate', 'avgGrowthRate', // 原有的6个
					'basePeriodWeight', 'pullGrowthRate', 'basePeriodSum', 'basePeriodDiff', 'abDiffGrowthRate' // 新增的5个（移除平均数的增长量）
				],
				fixedFields: ['basePeriodA', 'basePeriodB', 'growthAmountR1', 'growthAmountR2'], // 前4个固定字段
				
				// 已完成填写的字段标记
				completedFields: {},
				
				// 公式显示相关
				showFormulaModal: false,
				currentFormula: '',
				formulaTimer: null,
							
				// 数字键盘相关
				showKeyboardModal: false,
				currentInputField: '',
				currentInputValue: '',
							
				// 答案显示相关
				showAnswers: false,
				correctAnswers: {},
				
				// 公式映射
				formulas: {
					basePeriodA: 'A\' = A / (1 + r1)',
					basePeriodB: 'B\' = B / (1 + r2)',
					growthAmountR1: '△1 = A - A\'',
					growthAmountR2: '△2 = B - B\'',
					currentWeight: 'P = A / B',
					weightDifference: 'd = A/B * ((r1-r2)/(1+r1))',
					growthContributionRate: 'Ra = △1/(△1+△2)',
					yearlyGrowthRate: 'r = r1+r2+r1*r2',
					abSumGrowthRate: 'r3 = (A+B)/(A\'+B\') - 1',
					avgGrowthRate: '平均数增长率 = (r1-r2)/(1+r2)',
					// 新增公式
					basePeriodWeight: 'P\' = A\' / B\'',
					pullGrowthRate: '拉动增长率 = △1 / (A+B)',
					basePeriodSum: '基期和 = A\' + B\'',
					basePeriodDiff: '基期差 = A\' - B\'',
					abDiffGrowthRate: 'AB差增长率 = (A-B)/(A\'-B\') - 1'
				},
				
				// 答题用时记录
				fillOrder: [],            // 填空顺序
				answerTimestamps: {},     // 每一题的完成时间戳
				answerTimes: {},          // 每一题的用时（秒）
				
				// 提交状态控制
				isSubmitted: false,       // 是否已提交答案，用于禁用提交按钮
				
				// 草稿纸相关
				showNotepad: false,        // 是否显示草稿纸
				notepadColor: '#000000',   // 默认黑色
				notepadColors: ['#000000', '#ff0000', '#0000ff'], // 黑、红、蓝
				drawing: false,            // 是否正在绘制
				isEraserMode: false,       // 是否处于橡皮擦模式
				lastX: 0,                  // 上一个X坐标
				lastY: 0,                  // 上一个Y坐标
				lastMidX: 0,               // 上一个中点X坐标
				lastMidY: 0,               // 上一个中点Y坐标
				drawHistory: [],           // 绘制历史记录（优化为快照模式）
				currentStep: -1,           // 当前步骤
				canvasContext: null,       // 画布上下文
				canvasWidth: 0,            // 画布宽度
				canvasHeight: 0,           // 画布高度
				isFirstMove: true,         // 是否是第一次移动
				lastDrawTime: 0,           // 上次绘制时间戳（用于防抖优化）
				// 性能优化相关
				pathData: [],              // 当前路径数据
				maxHistorySteps: 20,       // 最大历史步骤数
				minDrawDistance: 6,        // 最小绘制距离
				drawThrottleTime: 20,      // 绘制节流时间（毫秒）
				// 橡皮擦范围指示器相关
				showEraserIndicator: false, // 是否显示橡皮擦范围指示器
				eraserX: 0,                 // 橡皮擦X坐标
				eraserY: 0,                 // 橡皮擦Y坐标
				eraserRadius: 15            // 橡皮擦半径（对应30px线宽）
			}
		},
		
		computed: {
			...mapState(['user', 'loginSuccess'])
		},
		
		methods: {
			...mapMutations([]),
			
			// 初始化训练模式（随机选择10个）
			initTrainingMode() {
				// 前4个固定不变
				const fixedFields = [...this.fixedFields];
				
				// 从后11个中随机选择6个（原有6个 + 新增5个，移除平均数的增长量）
				const optionalFields = [
					'currentWeight', 'weightDifference', 'growthContributionRate', 
					'yearlyGrowthRate', 'abSumGrowthRate', 'avgGrowthRate',
					'basePeriodWeight', 'pullGrowthRate', 
					'basePeriodSum', 'basePeriodDiff', 'abDiffGrowthRate'
				];
				
				// 随机打乱后11个字段
				const shuffledOptional = optionalFields.sort(() => Math.random() - 0.5);
				
				// 选择前6个
				const selectedOptional = shuffledOptional.slice(0, 6);
				
				// 组合成最终的10个训练字段
				this.currentTrainingFields = [...fixedFields, ...selectedOptional];
				
				// 更新总题目数
				this.totalQuestions = this.currentTrainingFields.length;
				
				console.log('当前训练模式字段:', this.currentTrainingFields);
			},
			
			// 检查字段是否在当前训练模式中
			isFieldInCurrentTraining(fieldName) {
				return this.currentTrainingFields.includes(fieldName);
			},
			
			// 获取字段显示名称
			getFieldDisplayName(fieldName) {
				const nameMap = {
					basePeriodA: '基期A\'',
					basePeriodB: '基期B\'',
					growthAmountR1: '增长量△1',
					growthAmountR2: '增长量△2',
					currentWeight: '现期比重P',
					weightDifference: '两期比重差',
					growthContributionRate: '增长贡献率Ra',
					yearlyGrowthRate: '间隔增长率',
					abSumGrowthRate: 'AB和增长率',
					avgGrowthRate: '平均数增长率',
					basePeriodWeight: '基期比重P\'',
					pullGrowthRate: '拉动增长率',
					basePeriodSum: '基期和',
					basePeriodDiff: '基期差',
					abDiffGrowthRate: 'AB差增长率'
				};
				return nameMap[fieldName] || fieldName;
			},
			
			// 草稿纸相关方法
			toggleNotepad() {
				if (!this.showNotepad) {
					this.showNotepad = true;
					// 获取系统信息，适配不同设备
					const systemInfo = uni.getSystemInfoSync();
					this.canvasWidth = systemInfo.windowWidth;
					this.canvasHeight = systemInfo.windowHeight - 80; // 减去控制区域高度
					
					// 延迟初始化canvas，确保DOM已经渲染
					this.$nextTick(() => {
						setTimeout(() => {
							this.initNotepad();
						}, 100);
					});
				} else {
					this.hideNotepad();
				}
			},
			
			initNotepad() {
			try {
				// 使用Canvas 2D接口初始化（支持同层渲染，性能更佳）
				uni.createSelectorQuery()
					.in(this)
					.select('#notepad-canvas')
					.fields({
						node: true,
						size: true
					})
					.exec(res => {
						// 获取canvas节点
						const canvas = res[0].node;
						// 获取绘图上下文
						this.canvasContext = canvas.getContext('2d');
						
						// 设置canvas尺寸
						const dpr = uni.getSystemInfoSync().pixelRatio;
						canvas.width = res[0].width * dpr;
						canvas.height = res[0].height * dpr;
						this.canvasContext.scale(dpr, dpr);
						
						// 设置画布样式（保持样式不变）
						this.resetCanvasStyle();
						
						// 保存canvas引用用于后续操作
						this.canvas = canvas;
						this.canvasWidth = res[0].width;
						this.canvasHeight = res[0].height;
					});
				
				// 重置历史记录（优化为快照模式）
				this.drawHistory = [];
				this.currentStep = -1;
				this.pathData = [];
				
				// 添加触觉反馈
				try {
					uni.vibrateShort({
						type: 'light'
					});
				} catch (vibrateError) {
					// 触觉反馈失败不影响主功能
					console.log('触觉反馈不支持');
				}
			} catch (error) {
				console.error('初始化草稿纸失败:', error);
				uni.showToast({
					title: '草稿纸初始化失败',
					icon: 'none',
					duration: 1500
				});
			}
		},
			
		// 新增：重置画布样式方法
		resetCanvasStyle() {
			if (!this.canvasContext) return;
			
			// 保持画笔样式不变
			this.canvasContext.strokeStyle = this.notepadColor;
			this.canvasContext.lineWidth = 3;
			this.canvasContext.lineCap = 'round';
			this.canvasContext.lineJoin = 'round';
			// 设置为正常绘制模式
			this.canvasContext.globalCompositeOperation = 'source-over';
		},
			
			startDrawing(e) {
				if (!this.canvasContext) return;
				
				try {
					// 阻止默认事件
					e.preventDefault && e.preventDefault();
					e.stopPropagation && e.stopPropagation();
					
					const touch = e.touches[0];
					// 小程序Canvas 2D接口直接使用触摸坐标
					const x = touch.x;
					const y = touch.y;
					
					this.drawing = true;
					this.isFirstMove = true;
					this.lastX = x;
					this.lastY = y;
					this.lastMidX = x;
					this.lastMidY = y;
					
					// 如果是橡皮擦模式，显示橡皮擦范围指示器
					if (this.isEraserMode) {
						this.showEraserIndicator = true;
						// 在小程序中直接使用触摸事件的clientX和clientY
						this.eraserX = touch.clientX;
						this.eraserY = touch.clientY;
					}
					
					// 优化：创建快照前先清理超过限制的历史记录
					if (this.currentStep >= this.maxHistorySteps - 1) {
						// 保留最近的一半历史记录
						const keepCount = Math.floor(this.maxHistorySteps / 2);
						this.drawHistory = this.drawHistory.slice(-keepCount);
						this.currentStep = keepCount - 1;
					}
					
					// 开始新的绘制步骤（使用快照模式）
					if (this.currentStep < this.drawHistory.length - 1) {
						this.drawHistory = this.drawHistory.slice(0, this.currentStep + 1);
					}
					
					// 创建新的路径记录
					this.pathData = [];
					this.drawHistory.push({
						type: this.isEraserMode ? 'erase' : 'draw',
						color: this.notepadColor,
						lineWidth: this.isEraserMode ? 15 : 3,
						paths: this.pathData
					});
					this.currentStep++;
					
					// 开始新路径（Canvas 2D接口直接支持标准API）
					this.canvasContext.beginPath();
					this.canvasContext.moveTo(x, y);
				} catch (error) {
					console.error('开始绘制失败:', error);
					this.drawing = false;
				}
			},
			
			draw(e) {
				if (!this.drawing || !this.canvasContext) return;
				
				try {
					// 阻止默认事件
					e.preventDefault && e.preventDefault();
					e.stopPropagation && e.stopPropagation();
					
					const touch = e.touches[0];
					// 小程序Canvas 2D接口直接使用触摸坐标
					const x = touch.x;
					const y = touch.y;
					
					// 如果是橡皮擦模式，更新指示器位置
					if (this.isEraserMode) {
						this.eraserX = touch.clientX;
						this.eraserY = touch.clientY;
					}
					
					// 计算距离，避免过于密集的绘制
					const distance = Math.sqrt(
						Math.pow(x - this.lastX, 2) + Math.pow(y - this.lastY, 2)
					);
					
					// 优化：增加最小距离阈值，减少绘制频率
					if (distance < this.minDrawDistance) return;
					
					// 优化：添加时间防抖，避免过于频繁的绘制
					const now = Date.now();
					if (now - this.lastDrawTime < this.drawThrottleTime) return;
					this.lastDrawTime = now;
					
					// 设置线宽
					const lineWidth = this.isEraserMode ? 15 : 3;
					const currentColor = this.notepadColor;
					
					// Canvas 2D接口实现橡皮擦功能
					if (this.isEraserMode) {
						// 使用destination-out模式实现真正的擦除功能
						this.canvasContext.globalCompositeOperation = 'destination-out';
					} else {
						// 恢复正常绘制模式
						this.canvasContext.globalCompositeOperation = 'source-over';
						this.canvasContext.strokeStyle = currentColor;
					}
					// 设置线条样式（Canvas 2D接口直接支持标准API）
					this.canvasContext.lineWidth = lineWidth;
					this.canvasContext.lineCap = 'round';
					this.canvasContext.lineJoin = 'round';
					
					// 使用二次贝塞尔曲线平滑绘制
					if (this.isFirstMove) {
						// 第一次移动，直接移动到当前点
						this.canvasContext.beginPath();
						this.canvasContext.moveTo(x, y);
						
						this.isFirstMove = false;
						this.lastMidX = x;
						this.lastMidY = y;
					} else {
						// 计算当前点和上一点的中点
						const midX = (this.lastX + x) / 2;
						const midY = (this.lastY + y) / 2;
						
						// 使用二次贝塞尔曲线从上一个中点绘制到当前中点
						this.canvasContext.beginPath();
						this.canvasContext.moveTo(this.lastMidX, this.lastMidY);
						this.canvasContext.quadraticCurveTo(this.lastX, this.lastY, midX, midY);
						this.canvasContext.stroke();
						
						// 更新中点坐标
						this.lastMidX = midX;
						this.lastMidY = midY;
					}
					
					// 优化：减少历史记录的存储频率
					if (this.pathData) {
						// 采样优化：不是每条线段都记录，减少内存占用
						if (this.pathData.length === 0 || distance > 12) {
							this.pathData.push({
								from: { x: this.lastX, y: this.lastY },
								to: { x, y }
							});
						}
					}
					
					this.lastX = x;
					this.lastY = y;
				} catch (error) {
					console.error('绘制失败:', error);
					this.drawing = false;
				}
			},
			
			stopDrawing() {
				this.drawing = false;
				// 隐藏橡皮擦范围指示器
				this.showEraserIndicator = false;
				// Canvas 2D接口是即时渲染的，不需要额外调用draw方法
			},
			
			// 切换橡皮擦模式
			toggleEraserMode() {
				try {
					this.isEraserMode = !this.isEraserMode;
					if (this.canvasContext) {
						// 优化：不直接切换Canvas模式，在绘制时再切换
						// 这样可以避免频繁的状态切换
					}
					// 触觉反馈
					try {
						uni.vibrateShort({
							type: 'light'
						});
					} catch (vibrateError) {
						console.log('触觉反馈不支持');
					}
				} catch (error) {
					console.error('切换橡皮擦模式失败:', error);
				}
			},
			
			exitEraserMode() {
				try {
					// 如果当前是橡皮擦模式，则切换回绘图模式
					if (this.isEraserMode) {
						this.isEraserMode = false;
						// 触觉反馈
						try {
							uni.vibrateShort({
								type: 'light'
							});
						} catch (vibrateError) {
							console.log('触觉反馈不支持');
						}
					}
				} catch (error) {
					console.error('退出橡皮擦模式失败:', error);
				}
			},
			
			changeColor(color) {
				try {
					this.notepadColor = color;
					
					// 触觉反馈
					try {
						uni.vibrateShort({
							type: 'light'
						});
					} catch (vibrateError) {
						console.log('触觉反馈不支持');
					}
				} catch (error) {
					console.error('切换颜色失败:', error);
				}
			},
			
			undo() {
				try {
					if (this.currentStep > -1) {
						this.currentStep--;
						this.redrawCanvas();
						// 触觉反馈
						try {
							uni.vibrateShort({
								type: 'light'
							});
						} catch (vibrateError) {
							console.log('触觉反馈不支持');
						}
					}
				} catch (error) {
					console.error('撤销操作失败:', error);
				}
			},
			
			clearNotepad() {
				if (!this.canvasContext) return;
				
				try {
					// Canvas 2D接口直接使用标准clearRect方法清空画布
					const dpr = uni.getSystemInfoSync().pixelRatio || 1;
					this.canvasContext.clearRect(0, 0, this.canvasWidth * dpr, this.canvasHeight * dpr);
					
					// 重新设置线条样式（保持画笔样式不变）
					this.resetCanvasStyle();
					
					this.drawHistory = [];
					this.currentStep = -1;
					this.pathData = [];
					
					// 触觉反馈
					try {
						uni.vibrateShort({
							type: 'medium'
						});
					} catch (vibrateError) {
						console.log('触觉反馈不支持');
					}
				} catch (error) {
					console.error('清空草稿纸失败:', error);
				}
			},
			
			hideNotepad() {
				this.showNotepad = false;
			},
			
			redrawCanvas() {
				try {
					if (!this.canvasContext) return;
					
					// Canvas 2D接口 - 清空画布
					const dpr = uni.getSystemInfoSync().pixelRatio || 1;
					this.canvasContext.clearRect(0, 0, this.canvasWidth * dpr, this.canvasHeight * dpr);
					
					// 重新绘制快照模式的历史记录
					for (let i = 0; i <= this.currentStep; i++) {
						const step = this.drawHistory[i];
						if (!step) continue;
						
						// 设置绘制样式
						if (step.type === 'erase') {
							this.canvasContext.globalCompositeOperation = 'destination-out';
						} else {
							this.canvasContext.globalCompositeOperation = 'source-over';
							this.canvasContext.strokeStyle = step.color;
						}
						this.canvasContext.lineWidth = step.lineWidth;
						this.canvasContext.lineCap = 'round';
						this.canvasContext.lineJoin = 'round';
						
						// 绘制路径
						for (let j = 0; j < step.paths.length; j++) {
							const path = step.paths[j];
							this.canvasContext.beginPath();
							this.canvasContext.moveTo(path.from.x, path.from.y);
							this.canvasContext.lineTo(path.to.x, path.to.y);
							this.canvasContext.stroke();
						}
					}
					
					// 恢复当前颜色和绘制模式
					this.resetCanvasStyle();
				} catch (error) {
					console.error('重绘画布失败:', error);
				}
			},
			
			// 生成随机数据
			generateRandomData() {
				// 生成现期值A、B（生成三位数）
				const generatePeriodValue = () => {
					return Math.floor(Math.random() * 900) + 100; // 100-999，确保都是三位数
				};
				
				// 生成增长率（-40%到40%，精确到小数点后一位，且不为零）
				const generateGrowthRate = () => {
					let rate = 0;
					while (rate === 0) {
						const tempRate = (Math.random() * 80) - 40; // -40到40
						rate = Math.round(tempRate * 10) / 10;
					}
					return rate;
				};
				
				// 生成数据
				this.currentData = {
					periodA: generatePeriodValue(),
					periodB: generatePeriodValue(),
					growthR1: generateGrowthRate(),
					growthR2: generateGrowthRate()
				};
				
				console.log('生成新数据:', this.currentData);
			},
			
			// 刷新数据
		refreshData() {
			// 初始化训练模式（随机选择6个）
			this.initTrainingMode();
			
			// 重置计时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			this.startTime = 0;
			this.timeUsed = 0;
			this.formattedTime = '00:00';
			
			// 重置提交状态
			this.isSubmitted = false;
			
			// 重置统计信息
			this.completedCount = 0;
			this.correctCount = 0;
			
			// 生成新数据
			this.generateRandomData();
			this.showAnswers = false;
			this.correctAnswers = {};
			// 清空用户输入（移除平均数的增长量）
					this.inputData = {
						basePeriodA: '',
						basePeriodB: '',
						growthAmountR1: '',
						growthAmountR2: '',
						currentWeight: '',
						weightDifference: '',
						growthContributionRate: '',
						yearlyGrowthRate: '',
						abSumGrowthRate: '',
						avgGrowthRate: '',
						// 新增字段（移除平均数的增长量）
						basePeriodWeight: '',
						pullGrowthRate: '',
						basePeriodSum: '',
						basePeriodDiff: '',
						abDiffGrowthRate: ''
					};
			
			// 重置总得分
			this.totalScore = 0;
			
			// 清空答题记录
			this.fillOrder = [];
			this.answerTimestamps = {};
			this.answerTimes = {};
			// 重置已完成字段标记
			this.completedFields = {};
			
			// 重新开始计时
			this.startTime = new Date().getTime();
			this.startTimer();
			
			uni.showToast({
				title: '数据已刷新',
				icon: 'success',
				duration: 1500
			});
		},
			
			// 提交答案
		submitAnswers() {
			// 设置提交状态为true，禁用提交按钮
			this.isSubmitted = true;
			
			// 停止计时器并保存最终用时
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
				// 确保最后一次更新时间
				if (this.startTime) {
					const now = new Date().getTime();
					this.timeUsed = Math.floor((now - this.startTime) / 1000);
					this.formattedTime = this.formatTime(this.timeUsed);
				}
			}
			
			// 计算正确答案
			this.correctAnswers = this.calculateCorrectAnswers();
			this.showAnswers = true;
			
			// 计算正确题目数
			this.calculateCorrectCount();
			
			// 计算总得分
			this.totalScore = 0;
			this.currentTrainingFields.forEach(field => {
				if (this.isAnswerCorrect(field)) {
					// 获取该题用时（秒）
					const timeSpent = parseFloat(this.answerTimes[field] || 0);
					// 根据用时计算得分
					if (timeSpent <= 10) {
						this.totalScore += 10;
					} else if (timeSpent <= 15) {
						this.totalScore += 9;
					} else if (timeSpent <= 20) {
						this.totalScore += 8;
					} else if (timeSpent <= 25) {
						this.totalScore += 7;
					} else if (timeSpent <= 30) {
						this.totalScore += 6;
					} else {
						this.totalScore += 5;
					}
				}
			});
			
			// 保存记录
			this.saveRecord();
			
			// 只有当做对题目大于等于6题时，才显示“答案已提交”
			if (this.correctCount >= 6) {
				uni.showToast({
					title: '答案已提交',
					icon: 'success',
					duration: 1500
				});
			}
		},
		
		// 保存记录
		saveRecord() {
			// 如果做对题目少于6题，不保存记录
			if (this.correctCount < 6) {
				console.log(`做对${this.correctCount}题，少于6题，不保存记录`);
				uni.showToast({
					title: '做对题目少于6题，不保存记录',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			const recordData = {
				modeType: 'table-analysis',
				modeTitle: '一表通算',
				totalQuestions: this.totalQuestions,
				modeBest: this.totalScore,
				correctCount: this.correctCount,
				wrongCount: this.totalQuestions - this.correctCount,
				totalTime: this.timeUsed
			};

			estimateRecordAdd(recordData).then(res => {
				console.log('接口返回结果', res);
				// 根据返回的code判断是否为最好成绩
				if (res.msg === "创造新记录" && res.code === 200) {
					// code为200，说明是最好成绩
					this.isBestRecord = true;
					uni.showToast({
						title: '恭喜！刷新最好成绩',
						icon: 'success',
						duration: 2000
					});
				} else {
					this.isBestRecord = false;
					const message = res && res.msg ? res.msg : '保存成功';
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 2500
					});
				}
			}).catch(err => {
				console.log('记录保存失败', err);
				// 请求失败的情况
				this.isBestRecord = false;
				uni.showToast({
					title: '网络错误，保存失败',
					icon: 'error',
					duration: 2000
				});
			});
		},
			
			// 显示公式
			showFormula(key) {
				if (this.formulas[key]) {
					this.currentFormula = this.formulas[key];
					this.showFormulaModal = true;
					
					// 清除之前的定时器
					if (this.formulaTimer) {
						clearTimeout(this.formulaTimer);
					}
					
					// 3秒后自动隐藏
					this.formulaTimer = setTimeout(() => {
						this.hideFormula();
					}, 5000);
				}
			},
			
			// 隐藏公式
			hideFormula() {
				this.showFormulaModal = false;
				this.currentFormula = '';
				if (this.formulaTimer) {
					clearTimeout(this.formulaTimer);
					this.formulaTimer = null;
				}
			},
			
			// 显示数字键盘
			showKeyboard(fieldName) {
				this.currentInputField = fieldName;
				this.currentInputValue = this.inputData[fieldName] || '';
				this.showKeyboardModal = true;
			},
			
			// 隐藏数字键盘
			hideKeyboard() {
				this.showKeyboardModal = false;
				this.currentInputField = '';
				this.currentInputValue = '';
			},
			
			// 输入数字
			inputNumber(num) {
				if (num === '.' && this.currentInputValue.includes('.')) {
					return; // 防止多个小数点
				}
				this.currentInputValue += num;
			},
			
			// 删除数字
			deleteNumber() {
				this.currentInputValue = this.currentInputValue.slice(0, -1);
			},
			
			// 清空输入
			clearInput() {
				this.currentInputValue = '';
			},
			
			// 切换正负号
			toggleSign() {
				if (this.currentInputValue === '') return;
				if (this.currentInputValue.startsWith('-')) {
					this.currentInputValue = this.currentInputValue.substring(1);
				} else {
					this.currentInputValue = '-' + this.currentInputValue;
				}
			},
			
			// 确认输入
		confirmInput() {
			if (this.currentInputField) {
				this.inputData[this.currentInputField] = this.currentInputValue;
				
				// 标记该字段为已完成，防止再次编辑
				this.completedFields[this.currentInputField] = true;
				
				// 记录填空时间
				const now = new Date().getTime();
				
				// 如果是第一次填写该字段，记录到填空顺序中
				if (!this.answerTimestamps[this.currentInputField]) {
					this.fillOrder.push(this.currentInputField);
				}
				
				// 更新时间戳
				this.answerTimestamps[this.currentInputField] = now;
				
				// 计算每一题的用时
				this.calculateAnswerTimes();
			}
			this.hideKeyboard();
			// 计算已完成填空数
			this.calculateCompletedCount();
		},
		
		// 计算每一题的用时
		calculateAnswerTimes() {
			const now = new Date().getTime();
			
			this.fillOrder.forEach((fieldName, index) => {
				const timestamp = this.answerTimestamps[fieldName];
				if (!timestamp) return;
				
				if (index === 0) {
					// 第一题的用时是从开始到完成的时间
					this.answerTimes[fieldName] = ((timestamp - this.startTime) / 1000).toFixed(1);
				} else {
					// 非第一题的用时是与上一题完成时间的差值
					const prevField = this.fillOrder[index - 1];
					const prevTimestamp = this.answerTimestamps[prevField];
					if (prevTimestamp) {
						this.answerTimes[fieldName] = ((timestamp - prevTimestamp) / 1000).toFixed(1);
					}
				}
			});
		},
			
			// 判断答案是否正确
		isAnswerCorrect(fieldName) {
			if (!this.inputData[fieldName] || !this.correctAnswers[fieldName]) {
				return false;
			}
			const userAnswer = parseFloat(this.inputData[fieldName]);
			const correctAnswer = parseFloat(this.correctAnswers[fieldName]);
			// 当答案的绝对值小于10时，误差范围为20%，小于50时为10%，否则为5%
			const tolerance = Math.abs(correctAnswer) <10 ? 
				Math.abs(correctAnswer * 0.2) : Math.abs(correctAnswer) <50 ? 
				Math.abs(correctAnswer * 0.1) : Math.abs(correctAnswer * 0.05);
			return Math.abs(userAnswer - correctAnswer) <= tolerance;
		},

		// 获取答案的误差范围
		getAnswerRange(fieldName) {
			if (!this.correctAnswers[fieldName]) {
				return { value: 0, tolerance: 0, formatted: '0±0' };
			}
			const correctAnswer = parseFloat(this.correctAnswers[fieldName]);
			// 当答案的绝对值小于10时，误差范围为20%，小于50时为10%，否则为5%
			const tolerance = Math.abs(correctAnswer) <10 ? 
				Math.abs(correctAnswer * 0.2) : Math.abs(correctAnswer) <50 ? 
				Math.abs(correctAnswer * 0.1) : Math.abs(correctAnswer * 0.05);
			// 使用与formatAnswer相同的精度格式化范围
			const formatValue = (value) => {
				const isGrowthRate = fieldName.includes('GrowthRate') || fieldName.includes('growthRate') || 
					fieldName === 'currentWeight' || fieldName === 'baseWeight' || fieldName === 'weightDifference';
				if (isGrowthRate) {
					return Number((Math.round(value * 10) / 10).toFixed(1));
				}
				if (Math.abs(value) < 10) {
					return Math.round(value * 10) / 10;
				} else {
					return Math.round(value);
				}
			};
			
			// 格式化正确答案和误差范围
			const formattedCorrectAnswer = formatValue(correctAnswer);
			const formattedTolerance = formatValue(tolerance);
			
			// 构建"正确答案±误差范围"的格式
			let formattedRange = `${formattedCorrectAnswer}±${formattedTolerance}`;
			
			// 处理百分比和单位
			const isPercentage = fieldName.includes('GrowthRate') || fieldName.includes('growthRate') || 
				fieldName === 'currentWeight' || fieldName === 'baseWeight' || fieldName === 'growthContributionRate';
			const isPercentagePoint = fieldName === 'weightDifference';
			
			if (isPercentage) {
				formattedRange += '%';
			} else if (isPercentagePoint) {
				formattedRange += '个百分点';
			}
			
			return {
				value: formattedCorrectAnswer,  // 正确答案
				tolerance: formattedTolerance,  // 误差范围
				formatted: formattedRange       // 格式化后的"正确答案±误差范围"
			};
		},
		
		// 开始计时器
		startTimer() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.timer = setInterval(() => {
				const now = new Date().getTime();
				this.timeUsed = Math.floor((now - this.startTime) / 1000);
				this.formattedTime = this.formatTime(this.timeUsed);
			}, 1000);
		},
		
		// 格式化时间显示（mm:ss）
		formatTime(seconds) {
			const mins = Math.floor(seconds / 60);
			const secs = seconds % 60;
			return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
		},
		
		// 计算已完成填空数
		calculateCompletedCount() {
			// 只计算当前训练模式中的字段
			this.completedCount = this.currentTrainingFields.filter(field => 
				this.inputData[field] && this.inputData[field] !== ''
			).length;
		},
		
		// 计算正确题目数
		calculateCorrectCount() {
			// 只计算当前训练模式中的字段
			this.correctCount = this.currentTrainingFields.filter(field => 
				this.isAnswerCorrect(field)
			).length;
		},
			
			// 计算正确答案
				calculateCorrectAnswers() {
					const A = this.currentData.periodA;
					const B = this.currentData.periodB;
					const r1 = this.currentData.growthR1 / 100; // 转为小数
					const r2 = this.currentData.growthR2 / 100;
					
					// 基期值
					const basePeriodA = A / (1 + r1);
					const basePeriodB = B / (1 + r2);
					
					// 增长量
					const growthAmountR1 = A - basePeriodA;
					const growthAmountR2 = B - basePeriodB;
					
					// 现期比重
					const currentWeight = (A / B) * 100;
					
					// 两期比重差
					const weightDifference = (A / B) * ((r1 - r2) / (1 + r1)) * 100;
					
					// 增长贡献率Ra
					const growthContributionRate = (growthAmountR1 / (growthAmountR1 + growthAmountR2)) * 100;
					
					// 隔年增长率
					const yearlyGrowthRate = ((1 + r1) * (1 + r2) - 1) * 100;
					
					// AB和增长率
					const abSumGrowthRate = ((A + B) / (basePeriodA + basePeriodB) - 1) * 100;

					// 平均数增长率
					const avgGrowthRate = ((r1 - r2) / (1 + r2)) * 100;
					
					// 新增计算项（移除平均数的增长量）
					// 基期比重P' = A'/B'
					const basePeriodWeight = (basePeriodA / basePeriodB) * 100;
					
					// 拉动增长率 = △1 / (A+B)
					const pullGrowthRate = (growthAmountR1 / (A + B)) * 100;
					
					// 基期和 = A' + B'
					const basePeriodSum = basePeriodA + basePeriodB;
					
					// 基期差 = A' - B'
					const basePeriodDiff = basePeriodA - basePeriodB;
					
					// AB差的增长率 = (A-B)/(A'-B') - 1
					const abDiffGrowthRate = ((A - B) / (basePeriodA - basePeriodB) - 1) * 100;
					
					// 根据答案绝对值大小决定精度的辅助函数
						const formatAnswer = (value, isGrowthRate = false) => {
							// 增长率字段处理
							if (isGrowthRate) {
								// 增长率：绝对值小于10时保留一位小数
								return Number((Math.round(value * 10) / 10).toFixed(1));
							}
							// 非增长率字段：绝对值小于10时保留一位小数，否则精确到个位
							if (Math.abs(value) < 10) {
								return Math.round(value * 10) / 10;
							} else {
								return Math.round(value);
							}
						};
					
					return {
						// 非增长率字段根据绝对值大小决定精度
						basePeriodA: formatAnswer(basePeriodA),
						basePeriodB: formatAnswer(basePeriodB),
						growthAmountR1: formatAnswer(growthAmountR1),
						growthAmountR2: formatAnswer(growthAmountR2),
						currentWeight: formatAnswer(currentWeight),
					weightDifference: formatAnswer(weightDifference),
					// 增长率字段精确到小数点后一位
					growthContributionRate: formatAnswer(growthContributionRate, true),
					yearlyGrowthRate: formatAnswer(yearlyGrowthRate, true),
					abSumGrowthRate: formatAnswer(abSumGrowthRate, true),
					avgGrowthRate: formatAnswer(avgGrowthRate, true),
					// 新增字段（移除平均数的增长量）
					basePeriodWeight: formatAnswer(basePeriodWeight),
					pullGrowthRate: formatAnswer(pullGrowthRate, true),
					basePeriodSum: formatAnswer(basePeriodSum),
					basePeriodDiff: formatAnswer(basePeriodDiff),
					abDiffGrowthRate: formatAnswer(abDiffGrowthRate, true)
					};
			}
		},
		
		mounted() {
			// 页面加载时初始化训练模式
			this.initTrainingMode();
			// 页面加载时自动生成初始数据
			this.generateRandomData();
			// 打开页面就开始倒计时
			this.startTime = new Date().getTime();
			this.startTimer();
		},
		
		destroyed() {
			// 组件卸载时清理计时器
			if (this.timer) {
				clearInterval(this.timer);
			}
			// 清理草稿纸资源
			this.canvasContext = null;
		},
		
		// UniApp的页面生命周期
		onHide() {
			// 页面隐藏时关闭草稿纸
			if (this.showNotepad) {
				this.showNotepad = false;
			}
		},
		
		onUnload() {
			// 页面卸载时清理资源
			this.canvasContext = null;
			this.drawHistory = [];
		}
	}
</script>

<style scoped>
	.view-contain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.table-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		overflow-y: auto;
	}
	
	.question-table-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-bottom: 16px;
		padding: 8px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.table-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	padding: 8px 12px;
	background-color: #f9f9f9;
	border-radius: 6px;
	gap: 8px;
	flex-wrap: wrap;
}

.status-item {
	font-size: 13px;
	font-weight: 500;
}

.status-divider {
	color: #ccc;
}

.all-correct {
	color: #4CAF50;
	font-weight: bold;
}

.best-record {
	color: #FF9800;
	font-weight: bold;
	animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
		text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e67e22, 0 0 20px #e67e22;
	}
	to {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f39c12, 0 0 40px #f39c12;
	}
}
	
	.data-table {
		flex: 1;
		width: 100%;
		border: 2px solid #333;
		border-radius: 8px;
		overflow: hidden;
		min-width: 100%;
		border-collapse: collapse;
		display: flex;
		flex-direction: column;
	}
	
	.table-row {
		display: flex;
		border-bottom: 1px solid #333;
		width: 100%;
		flex: 1;
		min-height: 0;
	}
	
	.table-row:last-child {
		border-bottom: none;
	}
	
	.table-cell {
		padding: 8px 6px;
		text-align: center;
		font-size: 12px;
		border-right: 1px solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-height: 0;
		height: 100%;
		word-break: break-all;
		word-wrap: break-word;
		min-width: 0;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	/* 第一列和第三列固定宽度比例 */
	.table-cell:first-child,
	.table-cell:nth-child(3) {
		flex: 0 0 70px;
		width: 70px;
		min-width: 70px;
		max-width: 70px;
		height: 100%;
	}
	
	/* 第二列和第四列自适应 */
	.table-cell:nth-child(2),
	.table-cell:nth-child(4) {
		flex: 1;
		min-width: 0;
		height: 100%;
	}
	
	.table-cell:last-child {
		border-right: none;
	}
	
	/* 输入框容器 */
	.input-container {
		padding: 4px;
		background-color: white !important;
		color: #333 !important;
		font-weight: normal !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		justify-content: flex-start;
		height: 100%;
		min-height: 0;
		box-sizing: border-box;
	}
	
	/* 前四个输入框（增长量和基期）的特殊样式 */
	.input-container.centered {
		justify-content: center;
	}
	
	/* 第五行开始的一行两列布局 */
	.full-width {
		flex: 3;
		min-width: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.table-input {
		flex: 1;
		height: calc(100% - 8px);
		min-height: 30px;
		font-size: 12px;
		text-align: center;
		padding: 0 4px;
		box-sizing: border-box;
		max-width: 120px;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 无边框输入框 */
	.borderless {
		border-radius: 4px;
	}
	
	/* 占位符样式 */
	.placeholder {
		color: #999;
		font-style: italic;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	/* 已完成输入框样式 */
	.completed {
		background-color: #e0e0e0;
		color: #333;
		cursor: not-allowed;
		font-style: normal;
		height: 100%;
	}
	
	/* 单位样式 */
	.unit {
		font-size: 12px;
		color: #666;
		white-space: nowrap;
		flex-shrink: 0;
		margin-left: 8px;
	}
	
	/* 公式显示弹窗 */
	.formula-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.formula-content {
		background-color: white;
		border-radius: 8px;
		padding: 20px;
		margin: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		max-width: 300px;
		width: 80%;
	}
	
	.formula-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 12px;
	}
	
	.formula-text {
		font-size: 14px;
		color: #666;
		text-align: center;
		font-family: 'Courier New', monospace;
		background-color: #f5f5f5;
		padding: 10px;
		border-radius: 4px;
	}
	
	/* 数字键盘样式 */
	.keyboard-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1100;
	}
	
	.keyboard-content {
		background-color: #f0f0f0;
		border-radius: 12px 12px 0 0;
		padding: 20px;
		width: 100%;
		max-width: 400px;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
	}
	
	.keyboard-header {
	 margin-bottom: 16px;
	}
	
	.input-display {
	 background-color: white;
	 padding: 12px;
	 border-radius: 8px;
	 text-align: right;
	 font-size: 18px;
	 min-height: 44px;
	 border: 1px solid #ddd;
	}
	
	.keyboard-grid {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	
	.keyboard-row {
		display: flex;
		gap: 8px;
	}
	
	.key-button {
		flex: 1;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		user-select: none;
	}
	
	.key-button:active {
		transform: scale(0.95);
	}
	
	.key-button.number {
		background-color: white;
		color: #333;
		border: 1px solid #ddd;
	}
	
	.key-button.number:hover {
		background-color: #f5f5f5;
	}
	
	.key-button.action {
		background-color: #ccc;
		color: #333;
		border: 1px solid #999;
	}
	
	.key-button.action:hover {
		background-color: #bbb;
	}
	
	.key-button.confirm {
		background-color: #4CAF50;
		color: white;
		border: 1px solid #45a049;
		flex: 2; /* 确定按钮占两列宽度 */
	}
	
	.key-button.confirm:hover {
		background-color: #45a049;
	}
	
	/* 公式显示样式 */
	.formula {
		font-size: 10px;
		color: #666;
		font-style: italic;
		margin-top: 2px;
	}
	
	/* 表格样式 */
	.period-a, .period-b, .weight-row, .base-period, 
	.difference-row, .growth-rate, .base-s, .base-d, 
	.yearly-growth, .ab-growth, .ab-diff-growth {
		color: #333;
		font-weight: bold;
	}
	
	/* 答案显示样式 */
	.answer-display {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 4px;
		font-size: 11px;
		align-items: center;
		justify-content: center;
		height: 100%;
		box-sizing: border-box;
	}
	
	.answer-display-row {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 4px;
		font-size: 11px;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 100%;
		box-sizing: border-box;
	}
	
	/* 统一答案项样式，确保垂直对齐 */
	.answer-item,
	.user-answer,
	.correct-answer,
	.time-answer {
		display: flex;
		align-items: center;
		gap: 4px;
		width: 100%;
		justify-content: center;
	}
	
	/* 统一标签样式，确保宽度一致 */
	.answer-display .label,
	.answer-item .label,
	.user-answer .label,
	.correct-answer .label,
	.time-answer .label {
		font-size: 10px;
		color: #666;
		flex-shrink: 0;
		min-width: 30px;
		text-align: left;
	}
	
	/* 统一值样式 */
	.answer-display .value,
	.answer-item .value,
	.user-answer .value,
	.correct-answer .value,
	.time-answer .value {
		font-size: 10px;
		font-weight: 500;
		flex: 1;
		word-break: break-all;
		text-align: left;
	}
	
	.value.correct {
		color: #4CAF50;
	}
	
	.value.incorrect {
		color: #f56c6c;
	}
	
	/* 正确答案钩号样式 */
	.check-icon {
		color: #4CAF50;
		font-size: 12px;
		font-weight: bold;
		margin-left: 4px;
		flex-shrink: 0;
	}
	
	/* 错误答案叉号样式 */
	.error-icon {
		color: #f56c6c;
		font-size: 12px;
		font-weight: bold;
		margin-left: 4px;
		flex-shrink: 0;
	}
	
	.input-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1;
		height: 100%;
	}
	
	/* 前四个输入框的input-wrapper居中样式 */
	.centered .input-wrapper {
		justify-content: center;
	}
	
	.action-buttons {
		display: flex;
		gap: 10px;
		margin-top: auto;
		padding: 15px 8px;
		flex-shrink: 0;
		background-color: #ffffff;
		border-top: 1px solid #eee;
	}
	
	.btn-refresh {
		background-color: #E8F5E8;
		color: #4CAF50;
		border: 1px solid #4CAF50;
		flex: 1;
	}
	
	.btn-submit {
		background-color: #4CAF50;
		color: white;
		flex: 1;
	}
	
	/* 确保u-button组件在action-buttons中正确显示 */
	.action-buttons .u-button {
		flex: 1;
		min-width: 0;
	}
	
	/* 移动端适配 */
	@media (max-width: 768px) {
		.container {
			height: 100vh;
			padding: 0;
		}
		
		.table-section {
			padding: 0 6px;
		}
		
		.question-table-container {
			overflow-x: auto;
			padding: 6px;
			margin-bottom: 0;
		}
		
		.table-cell {
			padding: 6px 4px;
			font-size: 11px;
			min-height: 35px;
			height: 100%;
		}
		
		.table-input {
			height: calc(100% - 6px);
			min-height: 28px;
			font-size: 11px;
		}
		
		.action-buttons {
			flex-direction: row;
			gap: 8px;
			padding: 12px 6px;
		}
	}
	
	/* 平板适配 */
	@media (min-width: 769px) and (max-width: 1024px) {
		.container {
			height: 100vh;
		}
		
		.table-section {
			padding: 0 12px;
		}
		
		.question-table-container {
			padding: 12px;
		}
		
		.table-cell {
			padding: 8px 6px;
			font-size: 13px;
			height: 100%;
		}
		
		.action-buttons {
			padding: 18px 12px;
			gap: 12px;
		}
	}
	
	/* 草稿纸样式 */
	.notepad-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1200;
	}
	
	.notepad-content {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.notepad-canvas {
		width: 100%;
		height: calc(100% - 80px);
		background-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* 画布容器 - 用于包含canvas和橡皮擦指示器 */
	.canvas-container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.notepad-controls {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background-color: rgba(255, 255, 255, 0.95);
		padding: 15px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 橡皮擦范围指示器样式 */
	.eraser-indicator {
		position: absolute;
		border-radius: 50%;
		border: 2px dashed currentColor;
		pointer-events: none;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.1);
		touch-action: none;
	}
	
	.control-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 20px;
	}
	
	.color-picker {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	
	.color-options {
		display: flex;
		gap: 8px;
	}
	
	.color-option {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 2px solid #ddd;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}
	
	.color-option.active {
		border: 3px solid #4CAF50;
		transform: scale(1.1);
	}
	
	.notepad-buttons {
		display: flex;
		gap: 8px;
		align-items: center;
	}
	
	.notepad-icon-button {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #f5f5f5;
		border: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
		user-select: none;
	}
	
	.notepad-icon-button:hover {
		background-color: #e9e9e9;
		transform: scale(1.05);
	}
	
	.notepad-icon-button:active {
		transform: scale(0.95);
	}
	
	.notepad-icon-button.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}
	
	.notepad-icon-button.clear-button {
		background-color: #fff3e0;
		border-color: #ff9800;
		color: #ff9800;
	}
	
	.notepad-icon-button.clear-button:hover {
		background-color: #ffe0b2;
	}
	
	.notepad-icon-button.close-button {
		background-color: #e3f2fd;
		border-color: #2196F3;
		color: #2196F3;
	}
	
	.notepad-icon-button.close-button:hover {
		background-color: #bbdefb;
	}
	
	.notepad-icon-button .icon {
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
	}
	
	.notepad-icon {
		cursor: pointer;
		transition: color 0.2s ease;
	}
	
	.notepad-icon:active {
		color: #4CAF50;
	}
	
	/* 移动端优化 */
	@media (max-width: 768px) {
		.notepad-controls {
			height: 70px;
			padding: 12px 15px;
		}
		
		.control-row {
			gap: 15px;
		}
		
		.color-option {
			width: 32px;
			height: 32px;
		}
		
		.color-options {
			gap: 6px;
		}
		
		.notepad-icon-button {
			width: 36px;
			height: 36px;
		}
		
		.notepad-icon-button .icon {
			font-size: 16px;
		}
		
		.notepad-buttons {
			gap: 6px;
		}
		
		.notepad-canvas {
			height: calc(100% - 70px);
		}
	}
</style>
